<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 Baidu, Inc. All Rights Reserved.
  -->
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar">
                		<div class="columns pull-left">
						<button data-toggle="modal" data-target="#myModal" type="button"
							class="btn  btn-primary" onclick="edit(0,'','',1);">
							<i class="fa fa-plus hidden" aria-hidden="true"></i>添加分类
						</button>
				    </div>
                    <div class="columns pull-right">
                        <button class="btn btn-success" onclick="reLoad()">查询</button>
                    </div>
                </div>
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
    <!--shiro控制bootstraptable行内按钮看见性 来自bootdo的创新方案 -->
    <div>
        <script type="text/javascript">
            var s_edit_h = 'hidden';
            var s_remove_h = 'hidden';
        </script>
    </div>
    <div shiro:hasPermission="blog:bContent:edit">
        <script type="text/javascript">
            s_edit_h = '';
        </script>
    </div>
    <div shiro:hasPermission="blog:bContent:remove">
        <script type="text/javascript">
            var s_remove_h = '';
        </script>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改分类信息</h4>
            </div>
            <div class="modal-body form-horizontal">
                <div class="form-group" hidden="hidden">
                    <label class="col-sm-2 control-label" for="model_id">ID</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="model_id" name="id"
                               placeholder="编号">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="model_orderNo_id">分类名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="modal_title" name="title">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="model_status">排序</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="modal_sort_order" name="sortOrder">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="model_status_new">分类状态</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="modal_status" name="orderStatusNew">
                            <option value="">选择分类状态</option>
                            <option value="0">不可用</option>
                            <option value="1">可用</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="model_modify_btn_id">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div th:include="include :: footer"></div>
<script language="javascript" type="text/javascript" src="/assets/javascript/bootstrap-typeahead.js"></script>
<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
<script type="text/javascript">

    var prefix = "/order/list"

    $(function() {
        $.fn.typeahead.Constructor.prototype.blur = function () {
            var that = this;
            setTimeout(function () { that.hide() }, 250);
        };
        $("#username_id").typeahead({
            insertPoint:$("#username_id"),
            source: function (query, process) {
                $.get('/search_user?keyword=' + query + "&findChildren=0", "", function (data) {
                    process(data);
                })
            }
        });
        $("#model_modify_btn_id").click(function () {
            var newStatus = $("#modal_status").val();
            var newTitle = $("#modal_title").val();
            var newSortOrder = $("#modal_sort_order").val();
            var id = $("#model_id").val();
            var data = {"id":id,"status":newStatus,"title":newTitle,"sortOrder":newSortOrder};
            $.ajax({
                type: "POST",
                url: "/shop/system/category/modify",
                data: JSON.stringify(data),
                dataType: "json",
                contentType:"application/json;charset=utf8",
                success: function(res){
                    if(res.code==0){
                        // 提交成功
                        alert('提交成功');
                        $("#myModal").modal('hide');
                        reLoad();
                    }else{
                        alert('提交失败，'+res.msg)
                    };
                },
                complete:function(){
                    isajax = false;
                }
            });
        });
        load();
    });

    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url : "/shop/system/goods_category/list", // 服务器数据的加载地址
                    // showRefresh : true,
                    // showToggle : true,
                    showColumns : true,
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 100, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"

                    queryParams : function(params) {
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit,
                            offset : params.offset,
                            orderNo : $("#order_no_id").val(),
                            username : $("#username_id").val(),
                            status : $("#status_id").val()
                            // name:$('#searchName').val(),
                            // username:$('#searchName').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        {
                        	   visible : true,
                            field : 'id',
                            title : 'ID'
                        },
                        {
                            visible : true,
                            field : 'title',
                            title : '名称'
                        },
                        {
                            visible : true,
                            field : 'sortOrder',
                            title : '排序'
                        },
                        {
                            visible : true,
                            field : 'createTime',
                            title : '创建时间'
                        },
                        {
                            visible : true,
                            field : 'lastModifyTime',
                            title : '最后一次修改时间'
                        },
                        {
                            field : 'status',
                            title : '状态',
                            align : 'center',
                            formatter : function(value, row, index) {
                                if (value == '0') {
                                    return '<span class="label label-danger">不可用</span>';
                                } else if (value == '1') {
                                    return '<span class="label label-primary">可用</span>';
                                }
                            }
                        },
                        {
                            title : '操作',
                            field : 'id',
                            align : 'center',
                            formatter:function (value,row,index) {
                                var e =
                                    '<a class="btn btn-primary btn-sm '+s_edit_h+'" data-toggle="modal" data-target="#myModal" href="#" mce_href="#" title="编辑" onclick="edit('+row.id+',\''+row.title+'\','+row.sortOrder+','+row.status+')"><i class="fa fa-edit"></i></a> ';
                                var d = '<a class="btn btn-warning btn-sm '+s_remove_h+'" href="#" title="删除"  mce_href="#" onclick="remove(\''
                                    + row.id
                                    + '\')"><i class="fa fa-remove"></i></a> ';
                                return e;
                            }
                        }
                        ]
                });
    }
    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }
    function add() {
        var addPage = layer.open({
            type : 2,
            title : '增加',
            maxmin : true,
            shadeClose : false, // 点击遮罩关闭层
            area : [ '800px', '520px' ],
            content : prefix + '/add' // iframe的url
        });
        layer.full(addPage);
    }
    function edit(cid,title,sortOrder,status) {
    		$("#modal_status").val(status);
        $("#modal_title").val(title);
        $("#modal_sort_order").val(sortOrder);
        $("#model_id").val(cid);
    }
    function remove(id) {
        layer.confirm('确定要删除选中的记录？', {
            btn : [ '确定', '取消' ]
        }, function() {
            $.ajax({
                url : prefix + "/remove",
                type : "post",
                data : {
                    'id' : id
                },
                success : function(r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        reLoad();
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        })
    }

    function preview(id) {
        window.open("/blog/open/post/"+id);
        //window.location.href="/blog/open/post/"+id;
    }
    function batchRemove() {
        var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
        if (rows.length == 0) {
            layer.msg("请选择要删除的数据");
            return;
        }
        layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
            btn : [ '确定', '取消' ]
            // 按钮
        }, function() {
            var ids = new Array();
            // 遍历所有选择的行数据，取每条数据对应的ID
            $.each(rows, function(i, row) {
                ids[i] = row['cid'];
            });
            $.ajax({
                type : 'POST',
                data : {
                    "ids" : ids
                },
                url : prefix + '/batchRemove',
                success : function(r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        reLoad();
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        }, function() {

        });
    }

</script>
</body>
</html>